<template>
  <q-page>
    <q-card class="q-ma-sm">
      <q-card-title class="card_head"><q-icon name="home" />&nbsp;&nbsp;基本信息</q-card-title>
      <q-card-main>
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" :error="$v.fields.name.$error" :warning="msg.name !== ''" v-model="fields.name"
                     :float-label="$v.fields.name.$error ? '项目名必填': msg.name === '' ? '项目名' : msg.name"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-input class="q-ma-sm" :error="$v.fields.name_en.$error" :warning="msg.name_en !== ''" v-model="fields.name_en"
                     :float-label="$v.fields.name_en.$error ? '项目英文标签必填': msg.name_en === '' ? '项目英文标签' : msg.name_en"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-select class="q-ma-sm" float-label="父节点" separator v-model="fields.parent" :options="parent.items"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-select class="q-ma-sm" :error="$v.fields.projectType.$error" separator :options="projectType.items"
                      :float-label="$v.fields.projectType.$error ? '请选择项目类型' : '项目类型'" v-model="fields.projectType"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-select class="q-ma-sm" float-label="项目状态" separator v-model="fields.status" :options="status.items"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-select class="q-ma-sm" separator v-model="fields.owner" :options="owner.items" :error="$v.fields.owner.$error"
                      :float-label="$v.fields.owner.$error ? '请选择负责人' : '负责人'"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-select class="q-ma-sm" :error="$v.fields.env.$error" separator :options="env.items" @input="$store.dispatch('newProject/changeProjectEnv')"
                      :float-label="$v.fields.env.$error ? '请选择环境' : '环境'" v-model="fields.env"/>
          </div>
        </div>
      </q-card-main>
    </q-card>
    <q-card class="q-ma-sm">
      <q-card-title class="card_head"><q-icon name="warning" />&nbsp;&nbsp;关键配置</q-card-title>
      <q-card-main>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-6">
            <q-input class="q-ma-sm" :error="$v.fields.git_path.$error" v-model="fields.git_path"
                     :float-label="$v.fields.git_path.$error ? 'GIT地址必填' : 'GIT地址'"/>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-3">
            <q-select class="q-ma-sm" :error="$v.fields.detection.$error" separator :options="detection.items"
                      :float-label="$v.fields.detection.$error ? '请选择检测方式' : '检测方式'" v-model="fields.detection"/>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-3">
            <q-input class="q-ma-sm" :error="$v.fields.detection_method.$error" v-model="fields.detection_method"
                     :float-label="$v.fields.detection_method.$error ? '请输入检测api|端口' : '检测端口|API(8080或:8080/info/)'"/>
          </div>
        </div>
      </q-card-main>
    </q-card>
    <q-card class="q-ma-sm">
      <q-card-main>
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-select class="q-ma-sm" float-label="发布类型" separator v-model="fields.publish_type"
                      :options="publish_type.items" @input="$store.dispatch('newProject/changePublishType')"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-select class="q-ma-sm" :error="$v.fields.pub_version.$error" separator v-model="fields.pub_version" @input="$store.dispatch('newProject/changePubVersion')"
                      :options="pub_version.items" :float-label="$v.fields.pub_version.$error ? '请选择发布版本' : '发布版本'"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3">
            <q-field icon="file_copy" class="q-if-has-label q-if-standard q-if-label">
              <q-checkbox v-model="fields.file_replace" color="primary" label="文件替换" left-label @input="$store.commit('newProject/changeFileReplace')"/>
            </q-field>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-3" v-if="showBuildParam">
            <q-select class="q-ma-sm" float-label="打包参数" separator v-model="fields.build_param" :options="build_param.items"/>
          </div>
        </div>
      </q-card-main>
    </q-card>
    <q-card class="q-ma-sm" v-if="showVMSelect">
      <q-card-main>
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-6">
            <q-select class="q-ma-sm" separator v-model="fields.javaopt" :options="javaopt.items" :error="$v.fields.javaopt.$error"
                      :float-label="$v.fields.javaopt.$error ? '请选择虚拟机JAVA参数' : '虚拟机JAVA参数'"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-6">
            <q-select class="q-ma-sm" :error="$v.fields.pubcmd.$error" separator :options="pubcmd.items"
                      :float-label="$v.fields.pubcmd.$error ? '请选择虚拟机运行参数' : '虚拟机运行参数'" v-model="fields.pubcmd"/>
          </div>
        </div>
      </q-card-main>
    </q-card>
    <q-card class="q-ma-sm" v-if="showDockerSelect">
      <q-card-main>
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-6">
            <q-select class="q-ma-sm" :error="$v.fields.docker_opt.$error" separator :options="dockeropt.items"
                      :float-label="$v.fields.docker_opt.$error ? '请选择容器JAVA参数' : '容器JAVA参数'" v-model="fields.docker_opt"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-6">
            <q-select class="q-ma-sm" :error="$v.fields.docker_cmd.$error" separator :options="dockercmd.items"
                      :float-label="$v.fields.docker_cmd.$error ? '请选择容器运行参数' : '容器运行参数'" v-model="fields.docker_cmd"/>
          </div>
        </div>
      </q-card-main>
    </q-card>
    <q-card class="q-ma-sm" v-if="showPath">
      <q-card-main>
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-6">
            <q-input class="q-ma-sm" :error="$v.fields.relative_conf_path.$error" v-model="fields.relative_conf_path"
                     :float-label="$v.fields.relative_conf_path.$error ? '相对路径必填' : '相对路径'" v-if="showPath"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-6">
            <q-input class="q-ma-sm" :error="$v.fields.absolute_conf_path.$error" v-model="fields.absolute_conf_path"
                     :float-label="$v.fields.absolute_conf_path.$error ? '绝对路径必填' : '绝对路径'" v-if="showPath"/>
          </div>
        </div>
      </q-card-main>
    </q-card>
    <q-card class="q-ma-sm">
      <q-card-main>
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-6">
            <q-select class="q-ma-sm col-xs-12 col-sm-12 col-md-12" multiple v-model="fields.service" :options="selectedService"
                      float-label="服务" filter clearable chips separator readonly
                      @click.native="$store.commit('newProject/selectService')"/>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-6">
            <q-select class="q-ma-sm col-xs-12 col-sm-12 col-md-12" multiple v-model="fields.host" :options="selectedHost"
                      float-label="主机" filter clearable chips separator readonly color="light"
                      @click.native="$store.commit('newProject/selectHost')"/>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-12">
            <q-input class="q-ma-sm" type="textarea" v-model="fields.describe" float-label="备注"/>
          </div>
        </div>
      </q-card-main>
    </q-card>
    <q-layout-footer>
      <q-toolbar style="min-height:35px;">
        <q-toolbar-title></q-toolbar-title>
        <q-btn class="q-mr-sm" color="info" icon="done" @click.native="submit">提交</q-btn>
        <q-btn class="q-mr-sm" color="secondary" icon="clear" @click.native="$store.dispatch('frame/jump', '/listproject')">返回</q-btn>
      </q-toolbar>
    </q-layout-footer>
    <q-modal v-model="serviceModal" position="right">
      <q-modal-layout>
        <q-toolbar slot="header">
          <q-btn flat round dense @click="serviceModal = false" icon="reply"/>
          <q-toolbar-title>可选服务</q-toolbar-title>
        </q-toolbar>
        <div class="q-ma-xs">
          <q-table class="q-ma-sm" ref="table" color="primary" :data="serviceData" :columns="serviceColumns" row-key="label"
                   :loading="loadServiceSelect" :rows-per-page-options="rowsPerPageOptions" selection="multiple"
                   :selected.sync="selectedService" :filter="search" :pagination.sync="pgn">
            <template slot="top-right" slot-scope="props">
              <q-search clearable v-model="search" placeholder="name"/>
            </template>
          </q-table>
        </div>
      </q-modal-layout>
    </q-modal>
    <q-modal v-model="hostModal" position="right">
      <q-modal-layout>
        <q-toolbar slot="header">
          <q-btn flat round dense @click="hostModal = false" icon="reply"/>
          <q-toolbar-title>可选主机</q-toolbar-title>
        </q-toolbar>
        <div class="q-ma-xs">
          <q-table class="q-ma-sm" ref="table" color="primary" :data="hostData" :columns="hostColumns" row-key="label"
                   :loading="loadHostSelect" :rows-per-page-options="rowsPerPageOptions" selection="multiple"
                   :selected.sync="selectedHost" :filter="search" :pagination.sync="pgn">
            <template slot="top-right" slot-scope="props">
              <q-search clearable v-model="search" placeholder="name"/>
            </template>
          </q-table>
        </div>
      </q-modal-layout>
    </q-modal>
  </q-page>
</template>

<script>
import newProjectModule from '../../store/newProject'
import { required } from 'vuelidate/lib/validators'
export default {
  preFetch ({ store }) {
    store.registerModule('newProject', newProjectModule)
    store.commit('newProject/loadSelect')
  },
  name: 'NewProject',
  data: function () {
    return this.$store.state.newProject
  },
  validations () {
    let fields = {
      name: {required},
      name_en: {required},
      projectType: {required},
      owner: {required},
      env: {required},
      detection: {required},
      detection_method: {required},
      git_path: {required},
      pub_version: {required},
      javaopt: {},
      pubcmd: {},
      docker_opt: {},
      docker_cmd: {},
      relative_conf_path: {},
      absolute_conf_path: {}
    }
    if (this.showVMSelect) {
      fields.javaopt = {required}
      fields.pubcmd = {required}
    }
    if (this.showDockerSelect) {
      fields.docker_opt = {required}
      fields.docker_cmd = {required}
    }
    if (this.fields.file_replace) {
      fields.relative_conf_path = {required}
      fields.absolute_conf_path = {required}
    }
    return {
      fields
    }
  },
  watch: {
    selectedHost () {
      this.$store.commit('newProject/watchSelectedHost')
    },
    selectedService () {
      this.$store.commit('newProject/watchSelectedService')
    }
  },
  methods: {
    submit () {
      this.$v.fields.$touch()
      if (this.$v.fields.$error) {
        this.$q.notify('请修正页面错误！')
        return
      }
      this.$store.dispatch('newProject/save')
    }
  },
  beforeDestroy () {
    this.$store.commit('newProject/reset')
    this.$store.unregisterModule('newProject')
  }
}
</script>

<style>
</style>
